<script>
	export default {
		data() { 
			return {
				inputValue:"",
				userId:"",
				consId:"",
				designerId:"",
				managerId:"",
				myType:"",
				outherType:"",
				myId:"",
				outherId:"",
				myCount:"",
				outherCount:"",
				path:"ws://"+global.address+":8081/ws/",
				messages: [],
			}
		},
		onLoad:function(option){
			this.initmsg(option);
			uni.setNavigationBarTitle({
			    title: this.outherCount.name
			});
			this.loadMsg();
			this.init();
		},
		updated:function() {
			this.scrollToBottom();
		},
		onUnload:function(){
			uni.closeSocket({
			});
			uni.onSocketClose(function (res) {
				console.log('WebSocket 已关闭！');
			});
		},
		methods:{
			initmsg:function(option){
				console.log(option.role)
				this.outherCount = JSON.parse(option.role);
				try {
					this.myCount = uni.getStorageSync("myCount");
				} catch(e) {
					console.log("获取个人信息失败")
				}
				if(this.myCount.roleType == "user"){
					this.userId = this.myCount.userId;
					this.myId = this.myCount.userId;
				}else if(this.myCount.roleType == "construction"){
					this.consId = this.myCount.consId;
					this.myId = this.myCount.consId;
				}else if(this.myCount.roleType == "designer"){
					this.designerId = this.myCount.designerId;
					this.myId = this.myCount.designerId;
				}else{
					this.managerId = this.myCount.managerId;
					this.myId = this.myCount.managerId;
				}
				if(this.outherCount.roleType == "user"){
					this.userId = this.outherCount.userId;
					this.outherId = this.outherCount.userId;
				}else if(this.outherCount.roleType == "construction"){
					this.consId = this.outherCount.consId;
					this.outherId = this.outherCount.consId;
				}else if(this.outherCount.roleType == "designer"){
					this.designerId = this.outherCount.designerId;
					this.outherId = this.outherCount.designerId;
				}else{
					this.managerId = this.outherCount.managerId;
					this.outherId = this.outherCount.managerId;
				}
				this.myType = this.myCount.roleType;
				this.outherType = this.outherCount.roleType;
				this.path = this.path+this.myType+"/"+this.myId+"/"+this.outherType+"/"+this.outherId+"/"+this.myCount.username;
				console.log(this.path);
			},
			init: function () {
				uni.connectSocket({
					url:this.path
				});
				uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接成功！');
				});
				uni.onSocketMessage( res => {
				  var that = this;
				  console.log(that.outherCount.username)
				  if(res.data.startsWith("http://47.113.101.81/decorate/messageImg")){
					  var msg = {
						username: that.outherCount.username,
						type: 'img', 
						msgValue: res.data
					  }
				  }else{
					  var msg = {
						username: that.outherCount.username,
						type: 'text', 
						msgValue: res.data
					  }
				  }
				  that.messages.push(msg)
				});
			},	
			loadMsg:function(){
				uni.request({
					url:"http://"+global.address+":8081/message/getMessageById",
					data:{
						userId:this.userId,
						consId:this.consId,
						designerId:this.designerId,
						managerId:this.managerId
					},
					method:"GET",
					success: (res) => {
						this.messages = res.data;
					}
				})
			},
			send:function(){
				if(this.inputValue != ''){
					// this.socket.send(this.inputValue);
					uni.sendSocketMessage({
						data:this.inputValue
					})
					var msg = {
						username: this.myCount.username,
						type: 'text', 
						msgValue: this.inputValue
					}
					this.messages.push(msg)
					this.inputValue = '';
				}
			},
			scrollToBottom:function() {
				var height = 255*this.messages.length;
				uni.pageScrollTo({
				    scrollTop: height+510,
				    duration: 200
				});
			},
			sendImg:function(){
				uni.chooseImage({
					count: 6,
					sizeType: "compressed",
					success:(res) => {
						var imgFile = res.tempFilePaths[0];
						var uper = uni.uploadFile({
							url:"http://"+global.address+":8081/picture/sendMsgPic/",
							filePath:imgFile,
							name:'file',
							success:(res) => {
								console.log(res);
								uni.sendSocketMessage({
									data:res.data
								})
								console.log("发送成功")
								var msg = {
									username: this.myCount.username,
									type: 'img', 
									msgValue: res.data
								}
								this.messages.push(msg)
							},
							fail:(res) => {
								console.log("上传文件失败")
							}
						})
					}
				})
			},
			addProject:function(){
				uni.navigateTo({
					url:"../index/pagesChild/addProject/addProject?designerId="+this.myCount.designerId+"&userId="+this.outherCount.userId
				})
			},
			previewImg(path) {
				let imgs = [];
				imgs.push(path)
				uni.previewImage({
					urls: imgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>
<template>
	<view class="uni-column" id="msgbox">
		<view class="content" id="content">
			<scroll-view id="scrollview">
				<view class="m-item" v-for="(message, index) in messages" v-bind:message="message" :key="index">
					<view class="m-left">
						<image class="head_icon-own" :src="outherCount.photo" v-if="(message.username == outherCount.username)&&(outherCount.photo != null)"></image>
						<image class="head_icon" src="../../static/img/homeHL.png" v-if="(message.username == outherCount.username)&&(outherCount.photo == null)"></image>
					</view>
					<!-- 对方信息的样式 -->
					<view v-if="message.username == outherCount.username" class="m-content">
						<view v-if="message.type == 'text'" class="m-content-head">
							<view class="m-content-head-home">{{message.msgValue}}</view>
						</view>
						<view v-else class="m-content-head">
							<view> 
								<image class="msgimg" :src="message.msgValue" @click="previewImg(message.msgValue)"></image>
							</view>
						</view>
					</view>
					<!-- 自己信息的样式 -->
					<view v-else class="m-content">
						<view v-if="message.type == 'text'" class="m-content-head-right">
							<view class="m-content-head-customer">{{message.msgValue}}</view>
						</view>
						<view v-else class="m-content-head-right">
							<view>
								<image class="msgimg" :src="message.msgValue" @click="previewImg(message.msgValue)"></image>
							</view>
						</view>
					</view>
					<view class="m-right">
						<image class="head_icon" src="../../static/img/customerHL.png" v-if="message.username == myCount.username"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 这是输入框模块 -->
		<view class="foot">
			<view class="footer">
				<view class="foot-left">
					<view class="uni-icon uni-icon-image" @click="sendImg"> </view>
				</view>
				<view class="footer-center">
					<input class="input-text" type="text" v-model="inputValue"></input>
				</view>
				<view class="footer-right">
					<view id='msg-type' @click="send">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
	@import "../../common/icon.css";
	
	.msgimg{
		height: 140px;
		width: 180px;
		border-radius: 5%;
	}
	
	#scrollview{
		padding: 0;
	}
	
	.m-item {
		display: flex;
		flex-direction: row;
		padding-top: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.m-left {
		display: flex;
		width: 60px;
		justify-content: center;
		align-items: flex-start;
	}
	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
	}
	.m-right {
		display: flex;
		width: 60px;
		justify-content: center;
		align-items: flex-start;
	}
	.head_icon {
		width: 40px;
		height: 40px;
		padding-top: 15px;
	}
	.head_icon-own {
		width: 40px;
		height: 40px;
		/* padding-top: 15px; */
		border-radius:100px;
	}
	.m-content-head {
		position: relative;
	}
	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
	}
	.m-content-head-home {
		/* width: 20px; */
		/* text-align: left; */
		background: #1482d1;
		border: 1px #1482d1 solid;
		border-radius: 10px;
		padding: 10px;
		color: white;
	}
	.m-content-head-home:before {
		border: 13px solid transparent;
		border-right: 13px solid #1482d1;
		left: -23px;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
	.m-content-head-customer {
		border: 1px white solid;
		background: #4CD964;
		border-radius: 10px;
		padding: 10px;
	}
	.m-content-head-customer:after {
		border: 13px solid transparent;
		border-left: 13px solid #4CD964;
		right: 38px;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}	
	
	.foot {
		position: fixed;
		width: 100%;
		height: 45px;
		min-height: 56px;
		left: 0px;
		bottom: 1px;
		overflow: hidden;
		
		background-color: #fafafa;
	}
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 40px;
		min-height: 40px;
		border-top: solid 1px #b5b5b5;
		overflow: hidden;
		padding: 5px;
	}
	.foot-left{
		width: 50px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #535353;
	}
	.footer-right {
		width: 70px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}
	.footer-center {
		flex: 1;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-center .input-text {
		flex: 1;
		background: #fff;
		border: solid 1px #ddd;
		padding: 10px !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 30px;
	}
	.uni-column {
		display: flex;
		flex-direction: column;
		margin-bottom: 60px;
		/* bottom: var(--window-bottom); */
	}
	.content {
		display: flex;
		flex: 1;
		padding-top: -10px;
	}
</style>
